<template>
  <div style="margin-top: 50px">
    <el-form
      :model="value"
      :rules="rules"
      ref="productInfoForm"
      label-width="120px"
      style="width: 600px"
      size="small"
    >
      <el-form-item label="摄影师/演员名字：" prop="name">
        <el-input v-model="value.name"></el-input>
      </el-form-item>
      <el-form-item label="年龄：" prop="age">
        <el-input v-model="value.age"></el-input>
      </el-form-item >
      

      <el-form-item label="摄影师/演员头像：" prop="avatar">
       <single-upload v-model="value.avatar"></single-upload>
      </el-form-item>
      <el-form-item label="摄影师/演员封面：" prop="cover">
      <single-upload v-model="value.cover"></single-upload>
      </el-form-item>
      <el-form-item label="演员身高：" prop="height">
        <el-input v-model="value.height"></el-input>
      </el-form-item>
      <el-form-item label="演员体重：" prop="weight">
        <el-input v-model="value.weight"></el-input>
      </el-form-item>
      <el-form-item label="职业：" prop="occupation">
        <el-input v-model="value.occupation"></el-input>
      </el-form-item>
      <el-form-item label="所在城市：" prop="city">
        <el-input v-model="value.city"></el-input>
      </el-form-item>
      <el-form-item label="三围尺寸：" prop="size">
        <el-input v-model="value.size" placeholder="xx/xx/xx"></el-input>
      </el-form-item>
      <el-form-item label="生日：" prop="birthday">
        <el-date-picker
          v-model="value.birthday"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="星座：" prop="constellation">
        <el-input v-model="value.constellation"></el-input>
      </el-form-item>
      <el-form-item label="爱好" prop="hobby">
        <el-input v-model="value.hobby"></el-input>
      </el-form-item>

      <el-form-item style="text-align: center">
        <el-button
          type="primary"
          size="medium"
          @click="handleNext('productInfoForm')"
          >下一步，填写社交信息</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import SingleUpload from "@/components/Upload/singleUpload";
import uploadAvatar from "@/components/UPloadAvatar/uploadAvatar";
import UploadAvatar from "../../../components/UPloadAvatar/uploadAvatar.vue";
export default {
  name: "actorInfo",
  components: {
    uploadAvatar,
    SingleUpload,
  },
  props: {
    value: Object,
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      //hasEditCreated: false,
      imageUrl: "",
      //上传图片地址,开发环境上传到本地
      UPLOAD_URL: process.env.UPLOAD_URL,

      //上传封面相关的属性
      dialogImageUrl: "",
      dialogVisible: false,
      fileList: [],

      //BASE_API: process.env.BASE_API,
      BASE_API: this.$VUE_APP_BASE_API,

      rules: {
        name: [{ required: true, message: "请输入演员名字", trigger: "blur" }],
        occupation: [
          { required: true, message: "请输入职业", trigger: "blur" },
        ],
        city: [{ required: true, message: "请输入所在城市", trigger: "blur" }],
      },
    };
  },
  mounted() {
  },
  computed: {
    coverPhoto() {
      console.log('coverPhoto页面的computed',this.value.cover)
      return this.value.cover;
    },
  },
  watch: {
    coverPhoto() {
      let pic = {
        name: "123.jpg",
        //本地开发调试用
        //url: `${this.BASE_API}${this.value.cover}`,
        //线上用
        url: `${this.value.cover}`,
      };
      this.fileList.push(pic);
      console.log("执行了created的if", `${this.value.cover}`);
    },
  },

  methods: {





    handleNext(formName) {
      console.log("点击了handleNext");
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit("nextStep");
        } else {
          this.$message({
            message: "验证失败",
            type: "error",
            duration: 1000,
          });
          return false;
        }
      });
    },
  },
};
</script>
<style >
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>
 